<template>
    <transition  mode="out-in" enter-active-class="animate__animated animate__fadeInLeft"
                    leave-active-class="animate__animated animate__fadeOutRight">
    <div class="content" >
        <div class="topBar" v-if="baseData.length>0">
            <div class="topItem">
                <div class="iconBox" style="background-color: rgb(255, 86, 86);">
                    <el-icon>
                        <UserFilled />
                    </el-icon>
                </div>
                <div class="itemCon">
                    <span>{{baseData[0].count}}</span>
                    <span class="title">用户总人数</span>
                </div>
            </div>
            <div class="topItem">
                <div class="iconBox" style="background-color: #51d351;">
                    <el-icon>
                        <Reading />
                    </el-icon>
                </div>
                <div class="itemCon">
                    <span>{{baseData[1].count}}</span>
                    <span class="title">图书总数</span>
                </div>
            </div>
            <div class="topItem">
                <div class="iconBox" style="background-color: #73a0fa;">
                    <el-icon>
                        <Files />
                    </el-icon>
                </div>
                <div class="itemCon">
                    <span>{{baseData[2].count}}</span>
                    <span class="title">座位总数</span>
                </div>
            </div>
            <div class="topItem">
                <div class="iconBox" style="background-color:#52c1f5;">
                    <el-icon>
                        <Tickets />
                    </el-icon>
                </div>
                <div class="itemCon">
                    <span>{{baseData[3].count}}</span>
                    <span class="title">评论总数</span>
                </div>
            </div>
            <div class="topItem">
                <div class="iconBox" style="background-color: #ff7a8c;">
                    <el-icon>
                        <CloseBold />
                    </el-icon>
                </div>
                <div class="itemCon">
                    <span>{{baseData[4].count}}</span>
                    <span class="title">预约人数</span>
                </div>
            </div>
        </div>
        <div class="mainBox">
            <div class="left">
                <div class="toDayData">
                    <h2>今日数据流量</h2>
                    <div class="itemBox">
                        <div class="item" v-for="item in todaytData" :key="item.title">
                            <span>{{ item.title }}</span>
                            <span>{{ item.count }}</span>
                        </div>
                    </div>
                </div>
                <div class="weekSeatData">
                    <h2>一周内座位预约次数</h2>
                    <div class="itemBox" ref="zxtRef">

                    </div>
                </div>
            </div>
            <div class="right">
                <div class="libRank">
                    <h2>图书借阅排行榜</h2>
                    <div class="mainBox2">
                        <el-table :data="rankData" style="width: 100%" height="100%">
                            <el-table-column label="排名">
                                <template #default="scope">
                                    <span :class="(scope.$index+1< 4 ? 'win' : 'lose') + ' topNum'"><span>{{ scope.$index+1
                                    }}</span></span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="bookname" label="书名" width="200"/>
                            <el-table-column prop="typeList.type" label="类型" />
                            <el-table-column prop="borrowCount" label="借阅量" />
                        </el-table>
                    </div>
                </div>
                <!-- <div class="adviceList">
                    <h2>读者意见通知<span>更多</span></h2>
                    <div class="itemBox">
                        <div class="item" v-for="item in adviceList" :key="item.aid">
                            <p>用户{{item.userInfo.nickName}}在{{item.advice[0].createdAt}}提交了意见</p>
                            <el-button type="primary">点击查看</el-button>
                        </div>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
    </transition>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { reqGetAdivce, reqGetHomePage, reqGetHotBooks, reqGetTodayDataList, reqGetWeekDataBySeat } from '../../api/dataView';
import { todayType, Week, WeekDataBySeatType } from '../../types/dataViewType'
import { zxt } from '../../utils/echarts'
import dateFormat from '@/utils/dateFormat';
import { getThisWeekData } from '@/utils/commonUse';
const zxtRef = ref()

const background=['']
const baseData=ref<Array<todayType>>([])
const todaytData = ref<Array<todayType>>([])        //当天数据容器
const weekData = ref<Array<any>>([])                      //一周座位预约/使用容器
const rankData = ref<Array<any>>([])                    //排名容器
const adviceList=ref<Array<any>>([])




const getBaseData=async()=>{
    console.log(1);
    
    let res=await reqGetHomePage()
    baseData.value=res.data.data
    console.log(baseData.value);
    
}


const getTodayData = async (date:string) => {                  //得到当天数据的方法
    let res = await reqGetTodayDataList(date)
    todaytData.value = res.data.data
}
const getWeekDataBySeats = async () => {             //得到一周座位预约/使用数据
    let lastweek= getThisWeekData()
    console.log(lastweek);
    
    let res = await reqGetWeekDataBySeat(lastweek)
    processWeek(res.data.data)
    console.log(weekData.value);

    zxt(zxtRef.value, weekData.value)

}

const processWeek = (arr: Array<WeekDataBySeatType>) => {         //处理周数据，用于可视化图表
    let newArr: Array<any> = []
    arr.forEach((item: WeekDataBySeatType) => {
        newArr = []
        item.week.forEach((item2: Week) => {
            newArr.push(item2.num)
        })
        weekData.value.push({ title: item.title, data: newArr })
    })
}



const getRank = async () => {                                   //获取排名数据
    let res = await reqGetHotBooks()
    rankData.value = res.data.data
}

const getAdvice=async()=>{                  //获取建议
    let res=await reqGetAdivce()
    adviceList.value=res.data   
}


onMounted(() => {
    getBaseData()
    const date=dateFormat(new Date().toString()).ymd
    getTodayData(date)        //调用当天数据的方法
    getWeekDataBySeats()
   
    getRank()
    // getAdvice()
    
})

</script>

<style scoped lang="scss">
h2 {
    width: 100%;
    background-color: #f9f9f9;
    padding: 20px;
    box-sizing: border-box;
    color: #666666;
    span{
        float: right;
        cursor: pointer;
    }
}


.topBar {
    width: 100%;
    height: 105px;
    background-color: #fff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .topItem {
        color: #fff;
        display: flex;

        .iconBox {
            height: 70px;
            width: 70px;
            border-radius: 5px;
            font-size: 44px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .itemCon {
            margin-left: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            span {
                color: #666666;
                font-size: 24px;
                font-weight: bold;
            }

            .title {
                font-weight: normal;
                color: #999999;
                font-size: 14px;
            }
        }
    }
}

.mainBox {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;

    .left {
        display: flex;
        flex-direction: column;
        width: 60%;

        .toDayData {
            width: 100%;
            background-color: #fff;
            border-radius: 5px;
            overflow: hidden;
            box-sizing: border-box;

            .itemBox {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                box-sizing: border-box;
                padding: 40px;

                .item {
                    margin-bottom: 20px;
                    box-sizing: border-box;
                    height: 70px;
                    width: 25%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-around;

                    span:first-child {
                        color: #9999a6;
                        font-size: 14px;
                    }

                    span {
                        color: #666688;
                        font-size: 24px;
                        font-weight: bold;
                    }
                }
            }
        }

        .weekSeatData {
            margin-top: 20px;
            width: 100%;
            background-color: #fff;
            border-radius: 5px;
            overflow: hidden;

            .itemBox {
                width: 100%;
                height: 700px;
            }
        }
    }

    .right {
        width: 38%;
        display: flex;
        flex-direction: column;



        .libRank {
            background-color: #fff;
            border-radius: 5px;
            overflow: hidden;
            width: 100%;

            .mainBox2 {
                padding: 10px 10px;
                background-color: #fff;
                box-sizing: border-box;
            }

            .topNum {
                border-radius: 5px;
                display: flex;
                width: 25px;
                height: 25px;
                align-items: center;
                justify-content: center;
                color: #fff;
            }

            .win {
                background-color: #ff9900;
            }

            .lose {
                background-color: #cccccc
            }

        }

        .adviceList {
            margin-top: 20px;
            height: 500px;
            background-color: #fff;
            border-radius: 5px;
            overflow: hidden;
            width: 100%;
            .itemBox{
                display: flex;
                flex-direction: column;
                .item{
                    box-sizing: border-box;
                    padding: 20px ;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border-bottom: 1px solid #f2f2f2;
                    p{
                        color: #666666;
                    }
                }
            }
        }
    }
}</style>